<!--图片标记-->
<template>
  <div
    class="container"
    v-loading="isLoading"
    element-loading-text="数据加载中..."
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <!--顶部工具栏-->
    <div class="top-tool">
      <!--左上角盒子-->
      <div class="top-left-div">
        <div
          v-for="item in colorList"
          :key="item.color"
          :class="[
            currentColor.color == item.color ? 'color-div-a' : 'color-div',
          ]"
          :style="{ backgroundColor: item.color }"
          @click="changeColor(item)"
        ></div>
        <!--拾色器按钮-->
        <div class="getcolor-div" title="拾色器">
          <img :src="colorImg" />
          <input id="colorInp" type="color" class="color-inp" />
        </div>
      </div>
      <!--右上角盒子-->
      <div class="top-right-div">
        <el-tooltip
          v-for="item in modelList"
          :key="item.model"
          class="item"
          effect="dark"
          :content="item.name + '：' + item.msg"
          placement="bottom"
        >
          <el-button
            :class="[
              currentModel.model == item.model ? 'model-btn-a' : 'model-btn',
            ]"
            type="primary"
            @click="changeModel(item)"
            ><img :src="item.img"
          /></el-button>
        </el-tooltip>

        <!--清空画布-->
        <el-tooltip
          class="item"
          effect="dark"
          content="清空标记"
          placement="bottom"
        >
          <el-button type="primary" class="clear-btn" @click="clickClear">
            <i class="el-icon-delete"></i>
          </el-button>
        </el-tooltip>

        <!--上传图片(必须限制accept为图片)-->
        <el-tooltip
          class="item"
          effect="dark"
          content="上传原图"
          placement="bottom"
        >
          <el-button type="primary" class="upload-btn">
            <i class="el-icon-upload2"></i>
            <input type="file" @change="clickUpload" accept="image/jpeg" />
          </el-button>
        </el-tooltip>

        <!--下载图片-->
        <el-tooltip
          class="item"
          effect="dark"
          content="下载标记图片"
          placement="bottom"
        >
          <el-button type="primary" class="download-btn" @click="clickDownload">
            <i class="el-icon-download"></i>
          </el-button>
        </el-tooltip>
      </div>
    </div>

    <!--画布盒子-->
    <div class="middle-div">
      <div class="canvas-div">
        <!--画布-->
        <canvas
          id="myCanvas"
          :height="canvasSize.height"
          :width="canvasSize.width"
          :style="{
            cursor: isDrag ? 'grab' : 'default',
            top: canvasPosition.y + 'px',
            left: canvasPosition.x + 'px',
          }"
          @mousewheel="handleMouseWheel"
          @contextmenu="handleContextmenu"
          @mousedown="handleMousedown"
          @mouseup="handleMouseup"
          @mousemove="handleMousemove"
          @dblclick="handleDblclick"
        ></canvas>
      </div>
    </div>

    <!--信息盒子-->
    <div
      v-if="false"
      v-show="isMsg"
      class="msg-div"
      :style="{
        top: mousePosition.y - 40 + 'px',
        left: mousePosition.x - 120 + 'px',
      }"
    >
      x:{{ canvasMousePosition.x }},y:{{ canvasMousePosition.y }}
    </div>
  </div>
</template>
<script>
import markImg from "../assets/img/markImg.jpg"; //初始背景
let ctx = ""; //画布上下文
export default {
  props: {},
  components: {},
  data() {
    return {
      canvasData: [], //画布中图形数据
      isLoading: false, //加载状态
      colorImg: require("../assets/img/color.png"), //拾色器图标
      imgSize: { height: "", width: "" }, //图片原始尺寸
      imgZoom: 1, //图片缩放倍数(默认一倍)
      canvasSize: { height: "", width: "" }, //画布尺寸
      canvasPosition: { x: "", y: "" }, //画布位置
      mousePosition: { x: "", y: "" }, //屏幕中鼠标位置
      canvasMouseStart: { x: "", y: "" }, //画布中鼠标开始点击位置
      canvasMousePosition: { x: "", y: "" }, //画布中鼠标位置
      isMouseDown: false, //鼠标按下状态
      isDrag: false, //拖拽状态
      dragStart: { x: "", y: "" }, //开始拖拽的位置
      isMsg: false, //信息盒子状态
      //颜色列表
      colorList: [
        { color: "#ffffff" },
        { color: "#000000" },
        { color: "#ff7070" },
        { color: "#00c79f" },
        { color: "#9094fe" },
      ],
      currentColor: {}, //当前选中颜色
      //模式列表
      modelList: [
        {
          model: "point",
          name: "点模式",
          img: require("../assets/img/point.png"),
          msg: "右键点击绘制",
        },
        {
          model: "beeline",
          name: "直线模式",
          img: require("../assets/img/beeline.png"),
          msg: "右键拖拽绘制",
        },
        {
          model: "rectangle",
          name: "矩形模式",
          img: require("../assets/img/rectangle.png"),
          msg: "右键拖拽绘制",
        },
        {
          model: "polygon",
          name: "多边形模式",
          img: require("../assets/img/polygon.png"),
          msg: "右键点击绘制，左键双击自动闭合",
        },
        {
          model: "circle",
          name: "圆形模式",
          img: require("../assets/img/circle.png"),
          msg: "右键拖拽绘制",
        },
      ],
      currentModel: {}, //当前模式
      currentDrawData: {}, //当前绘图数据
      base64: "", //截图数据
      polygonTempList: [], //多边形临时列表
      currentBgImg: "", //当前加载的背景图
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    //加载背景图片
    this.loadBgImg(markImg).then((img) => {
      this.currentBgImg = img; //存下加载完成后的背景图
      this.initCanvas(img); //图片加载完后初始化画布
    });
  },
  methods: {
    //必须异步加载图片
    loadBgImg(markImg) {
      let img = new Image(); //创建img标签
      img.src = markImg; //添加src
      return new Promise((resolve, reject) => {
        img.onload = () => {
          resolve(img); //返回标签
        };
        img.onerror = (err) => {
          reject(err);
        };
      });
    },

    //初始化画布
    async initCanvas(img) {
      await (this.canvasSize = { height: img.height, width: img.width }); //通过图片尺寸设置画布尺寸
      this.imgSize = { height: img.height, width: img.width }; //记录下图片原始尺寸
      ctx = document.getElementById("myCanvas").getContext("2d"); //获取上下文
      await ctx.drawImage(img, 0, 0, img.width, img.height); //在canvas中绘制图片(图片、起始位置、绘图尺寸)
      let canvasDiv = document.getElementsByClassName("canvas-div")[0];
      this.canvasPosition = {
        x: canvasDiv.offsetWidth / 2 - img.width / 2,
        y: canvasDiv.offsetHeight / 2 - img.height / 2 - 25,
      }; //背景居中
      //监听拾色器值的改变
      document
        .getElementById("colorInp")
        .addEventListener("input", this.getColorVal, false);
      this.currentModel = this.modelList[1]; //默认绘图模式
      this.currentColor = this.colorList[0]; //默认选中第一种颜色
    },

    //切换画笔颜色
    changeColor(data) {
      this.currentColor = data;
    },

    //获取拾色器颜色值
    getColorVal(e) {
      this.currentColor = { color: e.target.value }; //改变当前颜色
    },

    //切换画笔模式
    changeModel(data) {
      if (this.currentModel.model == "polygon") {
        //切换模式之前为多边形模式时需要清空多边形的临时列表，重绘大列表
        this.polygonTempList = [];
        ctx.clearRect(0, 0, this.canvasSize.width, this.canvasSize.height);
        ctx.drawImage(
          this.currentBgImg,
          0,
          0,
          this.canvasSize.width,
          this.canvasSize.height
        );
        this.drawToArr();
      }
      this.currentModel = data;
    },

    //点击清空
    clickClear() {
      this.$confirm("确定清空当前标记数据", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.clearCanvas(); //清空画布
          this.$message({
            type: "success",
            message: "清空成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消清空",
          });
        });
    },

    //清空画布
    clearCanvas() {
      this.canvasData = []; //清空图形数据
      this.currentDrawData = {}; //清空当前绘图数据
      this.polygonTempList = {}; //清空多边形临时列表
      ctx.clearRect(0, 0, this.canvasSize.width, this.canvasSize.height); //清除画布图形
      ctx.drawImage(
        this.currentBgImg,
        0,
        0,
        this.canvasSize.width,
        this.canvasSize.height
      ); //重绘背景
    },

    //点击上传
    clickUpload(e) {
      let file = e.target.files[0]; //获取事件中的file对象
      let fileSize = Math.round(file.size / 1024); //获取文件大小（kb）
      if (fileSize > 2 * 1024) {
        this.$message.error("只能上传小于2M的jpg格式图片!");
        return; //限制文件大小
      }
      const imgURL = window.URL.createObjectURL(file); //获取到图片路径
      this.loadBgImg(imgURL).then((img) => {
        this.currentBgImg = img; //存下加载完成后的背景图
        this.initCanvas(img); //图片加载完后初始化画布
        this.clearCanvas(); //清空画布
        this.recoverysize(); //复原
      });
    },

    //点击下载
    async clickDownload() {
      this.isLoading = true;
      await this.recoverysize(); //复原
      await this.downloadImg(this.base64, "imgMark"); //调用下载
      this.isLoading = false;
    },

    //复原
    async recoverysize() {
      await (this.imgZoom = 1); //复原图片缩放倍数
      await (this.canvasSize = this.imgSize); //复原尺寸
      let canvasDiv = document.getElementsByClassName("canvas-div")[0];
      this.canvasPosition = {};
      await (this.canvasPosition = {
        x: canvasDiv.offsetWidth / 2 - this.imgSize.width / 2,
        y: canvasDiv.offsetHeight / 2 - this.imgSize.height / 2 - 25,
      }); //复原位置
      await ctx.drawImage(
        this.currentBgImg,
        0,
        0,
        this.imgSize.width,
        this.imgSize.height
      ); //重绘背景
      await this.drawToArr(); //重绘标记
      await (this.base64 = document
        .getElementById("myCanvas")
        .toDataURL("image/jpeg")); //获取canvas的base64
    },

    //用base64数据生成图片文件并下载
    downloadImg(content, fileName) {
      //下载base64图片
      let base64ToBlob = function (code) {
        let parts = code.split(";base64,");
        let contentType = parts[0].split(":")[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        //返回一个Blob
        return new Blob([uInt8Array], {
          type: contentType,
        });
      };
      let aLink = document.createElement("a"); //创建a标签
      let blob = base64ToBlob(content); //获取Blob
      let evt = document.createEvent("HTMLEvents"); //创建事件
      evt.initEvent("click", true, true); //事件类型，是否冒泡，是否阻止浏览器默认行为
      aLink.download = fileName; //赋值下载名字
      aLink.href = URL.createObjectURL(blob); //赋值a标签的href
      aLink.click(); //点击a标签触发事件
    },

    //阻止默认右键冒泡事件，去除右键菜单
    handleContextmenu(e) {
      e.preventDefault();
    },

    //鼠标滚动事件(wheelDelta值上滚为负下滚为正)
    async handleMouseWheel(e) {
      let el = document.getElementById("myCanvas");
      let oldX = el.offsetLeft; //旧位置
      let oldY = el.offsetTop;
      await this.changeCanvas(e, oldX, oldY); //改变画布
      //使用改变后的此村绘制图片
      await ctx.drawImage(
        this.currentBgImg,
        0,
        0,
        this.canvasSize.width,
        this.canvasSize.height
      );
      await this.drawToArr(); //重绘列表数据
    },

    //滚动时改变画布
    changeCanvas(e, oldX, oldY) {
      let zoomSpeed = 1.2; //缩放速度
      e.wheelDelta < 0 && (zoomSpeed = 2 - zoomSpeed); //判断放大与缩小
      let posX = e.offsetX; //获取鼠标定点的位置（鼠标在图片上的位置）
      let posY = e.offsetY;
      let oldImgZoom = this.imgZoom; //记录下旧的图片缩放倍数
      this.imgZoom = this.imgZoom * zoomSpeed; //更新缩放倍数
      let minZoom = 0.3; //最小缩放倍数
      let maxZoom = 3; //最大缩放倍数
      this.imgZoom > maxZoom && (this.imgZoom = maxZoom); //限制缩放倍数
      this.imgZoom < minZoom && (this.imgZoom = minZoom);
      zoomSpeed = this.imgZoom / oldImgZoom; //更新缩放速度
      let height = Math.round(this.imgSize.height * this.imgZoom); //计算画布新宽高(原始宽高乘缩放倍数)
      let width = Math.round(this.imgSize.width * this.imgZoom);
      let newX = oldX + Math.round(posX * (1 - zoomSpeed)); //计算画布新位置(旧位置加偏移量)
      let newY = oldY + Math.round(posY * (1 - zoomSpeed));
      this.canvasSize = { height: height, width: width }; //更新画布尺寸
      this.canvasPosition = { x: newX, y: newY }; //更新画布位置
    },

    //鼠标按下事件
    handleMousedown(e) {
      if (e.button == 0) {
        this.isDrag = true; //左键按下打开拖拽
        let el = document.getElementById("myCanvas");
        this.dragStart = {
          x: el.offsetLeft - e.screenX,
          y: el.offsetTop - e.screenY,
        }; //记录下开始拖拽的偏移量
        return;
      }
      if (e.button !== 2) {
        return; //右键绘图
      }
      this.isMouseDown = true; //打开鼠标状态
      //获取画布中鼠标开始点击位置
      this.canvasMouseStart = {
        x: e.offsetX,
        y: e.offsetY,
      };
    },

    //鼠标移动事件
    async handleMousemove(e) {
      if (this.isDrag) {
        this.mouseDrag(e); //处理拖拽
        return;
      }
      this.isMsg = true;
      //获取屏幕中鼠标位置(显示实时坐标)
      this.mousePosition = {
        x: e.pageX,
        y: e.pageY,
      };
      //获取画布中鼠标位置
      this.canvasMousePosition = {
        x: e.offsetX,
        y: e.offsetY,
      };
      //判断是否超出边界
      if (e.offsetX < 0 || e.offsetY < 0 || e.offsetX == 0 || e.offsetY == 0) {
        this.isMsg = false;
        this.isMouseDown = false; //关闭鼠标状态
      }
      //判断鼠标状态是否打开
      if (!this.isMouseDown) {
        return;
      }
      ctx.clearRect(0, 0, this.canvasSize.width, this.canvasSize.height); //清除画布后立刻重新绘制视觉上形成动画
      await ctx.drawImage(
        this.currentBgImg,
        0,
        0,
        this.canvasSize.width,
        this.canvasSize.height
      ); //在canvas中绘制图片
      await this.drawToArr(); //重绘列表数据
      //绘制点
      if (this.currentModel.model == "point") {
        return;
      }
      //绘制直线
      if (this.currentModel.model == "beeline") {
        this.drawBeeline(e);
      }
      //绘制矩形
      if (this.currentModel.model == "rectangle") {
        this.drawRectangle(e);
      }
      //绘制圆形
      if (this.currentModel.model == "circle") {
        this.drawCircle(e);
      }
    },

    //鼠标拖拽
    mouseDrag(e) {
      this.canvasPosition.x = e.screenX + this.dragStart.x; //计算出画布位置
      this.canvasPosition.y = e.screenY + this.dragStart.y;
    },

    //通过保存的大列表绘制图形
    async drawToArr() {
      //遍历大列表开始绘制
      await this.canvasData.forEach((e) => {
        //绘制点
        if (e.type == "point") {
          ctx.beginPath();
          ctx.arc(
            e.data[0][0] * this.imgZoom,
            e.data[0][1] * this.imgZoom,
            10,
            0,
            2 * Math.PI
          );
          ctx.fillStyle = e.color;
          ctx.strokeStyle = e.color;
          ctx.fill();
          ctx.stroke();
        }
        //绘制直线
        if (e.type == "beeline") {
          ctx.beginPath();
          ctx.moveTo(e.data[0][0] * this.imgZoom, e.data[0][1] * this.imgZoom);
          ctx.lineTo(e.data[1][0] * this.imgZoom, e.data[1][1] * this.imgZoom);
          ctx.strokeStyle = e.color;
          ctx.stroke();
        }
        //绘制矩形
        if (e.type == "rectangle") {
          ctx.beginPath();
          ctx.strokeStyle = e.color;
          ctx.strokeRect(
            e.data[0][0] * this.imgZoom,
            e.data[0][1] * this.imgZoom,
            e.data[1][0] * this.imgZoom - e.data[0][0] * this.imgZoom,
            e.data[1][1] * this.imgZoom - e.data[0][1] * this.imgZoom
          ); //绘制矩形边框
        }
        //绘制多边形
        if (e.type == "polygon") {
          ctx.beginPath();
          ctx.strokeStyle = e.color;
          ctx.moveTo(e.data[0][0] * this.imgZoom, e.data[0][1] * this.imgZoom); //起始点
          //遍历多边形点列表连续绘制
          e.data.forEach((p) => {
            ctx.lineTo(p[0] * this.imgZoom, p[1] * this.imgZoom);
          });
          ctx.stroke();
        }
        //绘制圆形
        if (e.type == "circle") {
          ctx.beginPath();
          ctx.arc(
            e.data[0][0] * this.imgZoom,
            e.data[0][1] * this.imgZoom,
            e.r * this.imgZoom,
            0,
            2 * Math.PI
          );
          ctx.strokeStyle = e.color;
          ctx.stroke(); //绘制线条
        }
      });
      //判断多边形临时列表是否有数据
      if (this.polygonTempList.data && this.polygonTempList.data.length > 1) {
        ctx.beginPath();
        ctx.strokeStyle = this.polygonTempList.color;
        ctx.moveTo(
          this.polygonTempList.data[0][0] * this.imgZoom,
          this.polygonTempList.data[0][1] * this.imgZoom
        ); //起始点
        //遍历多边形点列表连续绘制
        this.polygonTempList.data.forEach((p) => {
          ctx.lineTo(p[0] * this.imgZoom, p[1] * this.imgZoom);
        });
        //通过状态判断多边形是否闭合
        if (this.polygonTempList.isClose) {
          ctx.closePath(); //闭合
        }
        ctx.stroke();
      }
    },

    //鼠标松开事件
    handleMouseup(e) {
      if (e.button == 0) {
        this.isDrag && (this.isDrag = false); //左键松开关闭拖拽
      }
      if (e.button !== 2) {
        return; //非右键松开
      }
      //点模式的松开
      if (this.currentModel.model == "point") {
        this.drawPoint(e); //用鼠标松开时的位置画点
        this.currentDrawData.data.forEach((e) => {
          e[0] = e[0] / this.imgZoom; //将坐标数据还原至真实数据
          e[1] = e[1] / this.imgZoom;
        });
        this.canvasData.push(this.currentDrawData); //添加当前绘图数据至大列表
      }
      //线模式、直线模式、矩形模式、圆形模式的松开
      if (
        this.currentModel.model == "line" ||
        this.currentModel.model == "beeline" ||
        this.currentModel.model == "rectangle" ||
        this.currentModel.model == "circle"
      ) {
        this.currentDrawData.data.forEach((e) => {
          e[0] = e[0] / this.imgZoom; //还原真实坐标
          e[1] = e[1] / this.imgZoom;
        });
        this.currentModel.model == "circle" &&
          (this.currentDrawData.r = this.currentDrawData.r / this.imgZoom); //圆形模式需要处理半径
        this.canvasData.push(this.currentDrawData); //添加当前绘图数据
      }
      //多边形模式的松开
      if (this.currentModel.model == "polygon") {
        this.constructPolygonData(e); //构造多边形数据
        this.drawToArr(); //多边形模式中每次鼠标松开后都需要重绘列表数据
        //更新多边形画线时起点位置
        this.canvasMouseStart = {
          x: e.offsetX / this.imgZoom, //还原真实坐标
          y: e.offsetY / this.imgZoom,
        };
      }
      this.isMouseDown = false; //关闭鼠标状态
      this.canvasMousePosition = {
        x: e.offsetX, //更新位置
        y: e.offsetY,
      };
    },

    //生成多边形数据
    constructPolygonData(e) {
      if (this.polygonTempList.data) {
        let oldPointX =
          this.polygonTempList.data[this.polygonTempList.data.length - 1][0];
        let oldPointY =
          this.polygonTempList.data[this.polygonTempList.data.length - 1][1];
        let newPointX = e.offsetX / this.imgZoom; //计算出真实坐标
        let newPointY = e.offsetY / this.imgZoom;
        //多边形需防止坐标重复
        if (oldPointX !== newPointX || oldPointY !== newPointY) {
          //非第一次松开直接push多边形点列表
          this.polygonTempList.data.push([newPointX, newPointY]);
        }
      } else {
        //第一次松开则构造完整数据
        this.polygonTempList = {
          type: "polygon",
          color: this.currentColor.color,
          data: [[e.offsetX / this.imgZoom, e.offsetY / this.imgZoom]],
        };
      }
    },

    //双击事件
    handleDblclick() {
      //双击闭合多边形条件为：模式为多边形模式、坐标数量至少为3、多边形闭合状态为false
      if (
        this.currentModel.model == "polygon" &&
        this.polygonTempList.data.length >= 3 &&
        !this.polygonTempList.isClose
      ) {
        this.polygonTempList.isClose = true; //改变多边形的闭合状态
        this.polygonTempList.data.push(this.polygonTempList.data[0]); //添加起点
        this.canvasData.push(this.polygonTempList); //将多边形的临时数据添加到大列表中
        this.polygonTempList = {}; //置空多边形临时列表
        this.drawToArr(); //绘制大列表
      }
    },

    //画点
    drawPoint(e) {
      //获取画布中鼠标坐标
      this.canvasMousePosition = {
        x: e.offsetX,
        y: e.offsetY,
      };
      ctx.beginPath(); //新建路径
      //arc参数为：x,y，半径、起始角、终止角
      ctx.arc(
        this.canvasMousePosition.x,
        this.canvasMousePosition.y,
        10,
        0,
        2 * Math.PI
      );
      ctx.fillStyle = this.currentColor.color; //填充颜色
      ctx.strokeStyle = this.currentColor.color; //线条颜色
      ctx.fill(); //填充
      ctx.stroke(); //绘制线条
      //生成点绘图数据
      this.currentDrawData = {
        type: "point",
        color: this.currentColor.color,
        data: [[e.offsetX, e.offsetY]],
      };
    },

    //画直线
    drawBeeline(e) {
      ctx.beginPath();
      ctx.strokeStyle = this.currentColor.color;
      ctx.moveTo(this.canvasMouseStart.x, this.canvasMouseStart.y); //画笔移动至(x,y)坐标
      ctx.lineTo(e.offsetX, e.offsetY); //绘直线至(x,y)坐标
      ctx.stroke();
      //生成直线绘图数据
      this.currentDrawData = {
        type: "beeline",
        color: this.currentColor.color,
        data: [
          [this.canvasMouseStart.x, this.canvasMouseStart.y],
          [e.offsetX, e.offsetY],
        ],
      };
    },

    //画矩形
    drawRectangle(e) {
      ctx.beginPath();
      ctx.strokeStyle = this.currentColor.color;
      //绘制矩形边框
      ctx.strokeRect(
        this.canvasMouseStart.x,
        this.canvasMouseStart.y,
        e.offsetX - this.canvasMouseStart.x,
        e.offsetY - this.canvasMouseStart.y
      );
      //生成矩形数据
      this.currentDrawData = {
        type: "rectangle",
        color: this.currentColor.color,
        data: [
          [this.canvasMouseStart.x, this.canvasMouseStart.y],
          [e.offsetX, e.offsetY],
        ],
      };
    },

    //画圆
    drawCircle(e) {
      this.canvasMousePosition = {
        x: e.offsetX,
        y: e.offsetY,
      };
      let { x, y } = this.canvasMouseStart;
      let r = Math.round(
        Math.sqrt(
          (e.offsetX - x) * (e.offsetX - x) + (e.offsetY - y) * (e.offsetY - y)
        )
      );
      ctx.beginPath(); //新建路径
      ctx.arc(x, y, r, 0, 2 * Math.PI);
      ctx.strokeStyle = this.currentColor.color; //线条颜色
      ctx.stroke(); //绘制线条
      //生成点绘图数据
      this.currentDrawData = {
        type: "circle",
        data: [[x, y]],
        r: r,
        color: this.currentColor.color,
      };
    },

    //画多边形
    drawPolygon(e) {
      ctx.beginPath();
      ctx.strokeStyle = this.currentColor.color;
      ctx.moveTo(this.canvasMouseStart.x, this.canvasMouseStart.y);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  user-select: none;
  height: 100%;
  width: 100%;
  .top-tool {
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: rgba(39, 55, 70, 1);
    .top-left-div {
      display: flex;
      .color-div-a,
      .color-div {
        border-radius: 50%;
        height: 40px;
        width: 40px;
        margin: 5px 10px;
        &:hover {
          cursor: pointer;
          box-shadow: 0px 0px 10px #fff;
        }
      }
      .color-div-a {
        box-shadow: 0px 0px 10px #fff;
      }
      .getcolor-div {
        position: relative;
        margin: 5px 10px;
        img {
          position: absolute;
          top: 0;
          height: 40px;
          width: 40px;
          border-radius: 50%;
        }
        input {
          z-index: 10;
          border-radius: 50%;
          position: absolute;
          top: 0;
          background-color: transparent;
          height: 40px;
          width: 40px;
          opacity: 0;
          border: 0px;
          cursor: pointer;
        }
      }
    }
    .top-right-div {
      margin: 0px;
      display: flex;
      .model-btn,
      .model-btn-a {
        background-color: #455769;
        border: 0px;
        padding: 9px 15px;
        margin: auto 10px;
        img {
          height: 20px;
          width: 20px;
        }
      }
      .model-btn-a {
        border: 0px;
        background-color: rgba(255, 255, 255, 0.5);
      }
      .download-btn,
      .clear-btn {
        margin: auto 10px;
        padding: auto;
      }
      .upload-btn {
        margin: auto 10px;
        height: 40px;
        width: 50px;
        padding: 0px;
        position: relative;
        input {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 10;
          width: 100%;
          height: 100%;
          opacity: 0;
          border: 0px;
        }
      }
    }
  }
  .middle-div {
    width: 100%;
    height: calc(100% - 50px);
    .canvas-div {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      #myCanvas {
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
      }
    }
  }
  .msg-div {
    position: absolute;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.5);
    color: #000;
    padding: 5px 20px;
  }
}
</style>